/*
	@author:Shengzhi Cheung
    @mail:shengzhizhang@gmail.com
	@description:The main styles for the website.
    @date:2012-02-05
*/

@import "variables";

@import "mixins";

@import "mysprites";

/* Icons */
.ico-chn {
	@extend .ico-flag;
	background-position:-8px -29px;
}
.ico-eng {
	@extend .ico-flag;
	background-position:-8px 2px;
}

/* Buttons */
.btn-get-quote { 
	display:inline-block; 
	padding:4px 20px; 
	margin:8px 20px; 
	border:1px solid #4998B8; 
	border-color: #6DC2E4 #67BEE1 #4998B8;
	color:#fff; 
	text-transform:uppercase; 
	@include font-sans-serif(18px, bold, 26px);
	@include gradient-vertical(#94DCF1, #5FBEE5);
	box-shadow:(inset 0 1px 0 rgba(255, 255, 255, .5), 0 1px 2px rgba(0, 0, 0, .3));
	font-family:"Myriad Pro", Tahoma, Arial, Helvetica; 
	@include border-radius(5px); 
	@include text-shadow(0 1px 1px #66ABC3);
	*vertical-align:middle; 
	_margin:7px 20px; 
	&:hover {
		@include gradient-vertical(#7BCEEB, #7ED0EC);
		text-decoration:none; 
		color:#fff; 
	}
}

// Box
.box {
	@include box;	
}

/*Layout*/
.column2 {
	border-top-color:#fff;
}

/* Header */
#header { 
	position:relative; 
	height:36px; 
	padding:20px 0; 
	*zoom:1; 
}

/* Language switch */
.lang-switch { 
	position:absolute; 
	right:15px; 
	top:3px; 
	height:17px;
	@extend .lang-bg;
	background-position:right top; 
	ul {
		width:112px; 
		height:17px; 
		padding-left:20px; 
		margin:0 30px 0 0; 
		@extend .lang-bg;
		list-style:none; 
	}
	li {
		float:right; 
		margin-left:10px; 
		_display:inline;
		a {
			padding-left:20px; 
			font-size:11px; 
			color:$grayDark; 
			-webkit-text-size-adjust:none;
			&:hover {
				color:$black; 
			}
		}
	}
}

/* Top bar */
.top-bar { 
	height:36px; 
	@extend .x-bg;
	@include border-radius;
	@include box-shadow(0 1px 1px 0 rgba(0, 0, 0, .25));
}

/* Logo */
.logo { 
	float:left; 
	width:150px;
	margin:0;  
	background:url(bgimg/logo_bg.png) no-repeat center top; 
	font-size:100%; 
	a {
		margin-left:25px; 
		color:$black; 
		font:bold 18px/36px "Myriad Pro", Tahoma, Arial, Helvetica; 
		text-shadow:0 1px 0 rgba(255, 255, 255, .4);
		&:hover {
			color:$black; 
			text-decoration:none;
		}
	}
}

/* Navigation */
.nav { 
	float:left; 
	padding-left:2px; 
	background:url(bgimg/nav_split.png) no-repeat left top; 
	ul {
		list-style:none; 
		margin:0; 
		padding:0; 
	}
	li {
		float:left; 
		line-height:36px; 
		background:url(bgimg/nav_split.png) no-repeat right top;
		a {
			float:left; 
			position:relative; 
			height:36px; 
			padding:0 22px; 
			margin:0 2px 0 -1px; 
			font-size:14px; 
			color:#1e1e1e; 
			@include text-shadow(0 1px 0 rgba(255, 255, 255, .4));
			&:hover {
				text-decoration:none; 
				color:#fff; 
				@include text-shadow;
			}
		}
	}
	.active {
		a {
			@extend .x-bg;
			text-decoration:none; 
			color:#fff; 
			@include text-shadow;
			background-position:0 -56px;
		}
	}
}

/* Search box */
.search-box { 
	float:right; 
	position:relative; 
	width:180px; 
	height:22px; 
	margin:6px 10px 0 0; 
	background:#f8f8f8; 
	@include border-radius(11px);
	@include box-shadow(inset 0 1px 2px 0 rgba(0, 0, 0, .15));
	_display:inline; 
	.btn-search { 
		position:absolute; 
		left:5px; 
		top:3px; 
		width:16px; 
		height:16px; 
		background-position:-10px 2px; 
		overflow:hidden; 
		text-indent:-9999px;
	}
	input {
		width:145px;
		padding:2px 0 0 0; 
		margin:0 10px 0 25px; 
		border:0; 
		outline:0; 
		background:transparent; 
		vertical-align:middle; 
		color:$grayLight; 
		@include font-family-sans-serif;
	}
}
// Search box focus
.search-focus { 
	@extend .search-box;
	background:#fff; 
	input {
		color:#000; 
		font-size:13px; 
	}
	.btn-search { 
		@extend .ico-bg;
		background-position:-10px -30px; 
	}
}


/* Container */
#container { 
	position:relative; 
}



/* Slider */
.slider { 
	position:relative; 
	_zoom:1; 
	.slides_container { 
		width:960px; 
		height:496px; 
		overflow:hidden; 
		img {
			@include border-radius(5px 5px 0 0);
			display:block;
		}
	}
	.slider-tabs { 
		position:absolute; 
		right:20px; 
		bottom:-28px; 
		list-style:none; 
		margin:0; 
		padding:0; 
		li {
			float:left; 
			width:14px; 
			height:14px; 
			margin-left:10px; 
			_display:inline;
			a {
				display:block; 
				height:14px; 
				border-top:1px solid #A3A3A3; 
				overflow:hidden; 
				text-indent:-9999px; 
				background-color:#D6D6D6; 
				@include border-radius(7px);
			}
		}
		.active {
			a {
				background-color:#65CAEA; 
				border-color:#2A6F87;
			}
		}
	}
}

/* Headline */
.headline { 
	height:38px; 
	@extend .x-bg;
	background-position:0 -112px; 
	border-top:1px solid #fff; 
	font-family:Tahoma, Arial, Helvetica; 
	h3 {
		float:left; 
		width:150px; 
		margin:0; 
		padding:10px 0 0 20px; 
		font-size:12px; 
		font-weight:bold;
	}
	.list {
		margin:10px 0 0 170px; 
		height:18px; 
		overflow:hidden;
		ul {
			list-style:none; 
			margin:0; 
			padding:0; 
		}
		a {
			color:$gray; 
		}
	}
}

/* Quote */
.quote { 
	height:50px; 
	padding:0 20px; 
	@extend .x-bg;
	background-color:#fff; 
	background-position:0 -170px; 
	font-size:20px; 
	line-height:50px; 
	color:$grayLight; 
	@include border-radius(0 0 5px 5px); 
	overflow:hidden; 
	clear:both; 
}

/* Series */
.series { 
	margin-top:15px; 
	*zoom:1; 
	.box {
		float:left; 
		width:312px; 
		margin-right:10px; 
		_display:inline;
	}
	.last {
		margin:0; 
	}
}

/* Mod */
.mod {
	@extend .box;
	.hd { 
		height:52px; 
		background: url(bgimg/tit_bg.png) no-repeat; 
		text-align:center; 
		line-height:52px;  
		color:#333; 
		@include text-shadow(0 1px 0 #fff);
		@include border-radius(5px 5px 0 0);
		h2 {
			margin:0; 
			@include font-shorthand(20px, normal, 52px);
		}
	}
	.bd { 
		height:160px; 
	}
}

/* Footer */
#footer { 
	margin-top:15px;
	padding-bottom:20px; 
	text-align:center;
}

.brands { 
	height:53px; 
	@extend .box;
	@extend .x-bg;
	background-position:0 -240px; 
	a {
		float:left; 
		margin:7px 20px 0; 
		_display:inline;
	}
}

/* Foot links */
.foot-contact { margin:10px 0; }
.foot-links {
	@extend .foot-contact;
	a {
		color:$grayDark; 
		margin:0 10px;
	}
}
/* Copyright */
.copyright { 
	padding-top:15px; 
	background:url(bgimg/split.png) no-repeat center top; 
	color:$grayLight; 
	@include text-shadow(0 1px 0 rgba(255, 255, 255, 1));
}


// Product pages
// ---------------------------------
/* Categories */
.categories { 
	padding:10px 20px; 
	@extend .bottom-bg;
	@include border-radius(4px 4px 0 0); 
	font-size:14px; 
	color:$grayDark;
	span { 
		float:left; 
		font-weight:bold; 
	}
	a { 
		float:left; 
		padding:1px 10px 0; 
		margin:0 5px; 
		white-space:nowrap; 
		color:$gray; 
	}
	.active { 
		border-top:1px solid #629A39; 
		padding-top:0; 
		color:#fff; 
		@include gradient-vertical(#8BDA61, #6EAC40);
		@include border-radius(12px);
		@include text-shadow(0 1px 0 #2E891C);
		&:hover { 
			color:#fff; 
			text-decoration:none; 
		}
	}
}

/* Filter */
.filter { 
	padding:10px 20px; 
	@extend .bottom-bg;
	select { 
		padding:3px; 
	}
}

/* Prodcut List */
.product-list {
	position:relative; 
	margin:0 0 20px 0; 
	padding-left:18px; 
	background: url(bgimg/top_bg.png) repeat-x;
	border-top:1px solid #fff; 
	@include clearfix();
	.item { 
		position:relative; 
		float:left; 
		width:450px; 
		margin:20px 18px 0 0; 
		background:#F7F7F7; 
		border:1px solid #ddd; 
		_display:inline; 
		.pic {
			width:450px; 
			height:300px; 
			overflow:hidden; 
			a {
				position:relative; 
				display:block; 
				height:300px; 
				&:hover {
					img {
						@include opacity(60);
						@include transition(opacity .2s linear);
					}
					.details {
						@include opacity(60);
						@include transition(opacity .2s linear);
					}
				}
				.details {
					position:absolute; 
					left:50%; 
					top:50%; 
					width:40px; 
					height:40px; 
					margin-left:-20px; 
					margin-top:-20px; 
					background:$black; 
					@include opacity(0);
					@include border-radius(); 
					i {
						position:absolute; 
						left:12px; 
						top:12px; 
					}
				}
			}
			img {
				width:450px; 
				height:300px; 
				display:block; 
			}
		}
		.info { 
			@include gradient-vertical(#fff, #eee);
			border-bottom:1px solid #fff; 
			h2 { 
				height:36px; 
				line-height:36px; 
				padding-left:20px; 
				margin:0; 
				font-size:16px; 
				font-weight:normal;
				em { 
					font-style:normal; 
					color:$grayDark; 
				}
			}
			p { 
				float:right;
				margin:0;  
				padding-right:20px; 
				font-size:14px; 
				line-height:36px; 
				color:#999; 
			}
			.btn {
				position:absolute;
				right:20px; 
				bottom:20px
			}
			
		}
		.size {
			position:absolute; 
			right:-1px;
			top:-1px; 
			height:45px; 
			line-height:45px; 
			padding:0 10px; 
			color:$white; 
			font-size:30px; 
			font-weight:bold;
			background:$gray; 
			@include opacity(50);	
			@include border-radius(0 0 0 10px); 
			@include text-shadow(0 2px 0 rgba(0, 0, 0, 1));
		}
	}
}

.loading { 
	display:none; 
	position:absolute; 
	left:50%; 
	top:30%; 
	width:32px; 
	height:32px; 
	margin:-16px 0 0 -16px; 
	background:url(img/loading.gif) no-repeat; 
} 
.list-view-loading {
	background: none;
	.loading {
		display:inline; 
	}
}
.tips-empty {
	display:block; 
	margin:156px 0 157px; 
	text-align:center; 
	font-size:36px; 
	line-height:45px; 
	color:#ddd; 
}

/*Product Details*/
.breadcrumbs {
	@extend .x-bg;
	background-position:0 -170px; 
}
.product-details {
	margin:0 30px; 
	h1 {
		margin:10px 0 30px; 
		color:$blue; 
		em {
			font-style:normal; 
			color:$grayDark; 
		}
	}
}

.rand-products {
	ul {
		list-style:none; 
		margin:0; 
		padding:0; 
	}
	li {
		padding:20px; 
		border-bottom:1px solid #E2E2E2; 
		h3 {
			font-size:14px;
			font-weight:normal;
			em {
				font-style:normal; 
				color:$grayDark; 
			}
		}
		p {
			margin-bottom:0; 
		}
	}
}